<html>
    <head>
        <link href="v2.css" rel="stylesheet" type="text/css" />
        <link href="js/jquery-ui/css/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" type="text/css" />
        <title>v3</title> 
        <script type="text/javascript" src="js/jquery-ui/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui/js/jquery-ui-1.10.1.custom.js"></script>
        <script type="text/javascript" src="js/socket.io-client/dist/socket.io.js"></script>
        <script type="text/javascript" src="js/util/require.js" data-main="js/index"></script>
        <script type="text/javascript" src="js/util/tween.js" ></script>
        <script type="text/javascript" src="js/network.js"></script>
        <script type="text/javascript">
            var keyCodes = {
                F2: 113,
            };
    
            $(document).ready(function() {
                $.ajax({
                    url: 'maps/listFilenames.php',
                    dataType: 'json',
                    async: false
                }).done(function(data) {
                    var i;
    
                    if (!data.filenames) {
                        return;
                    }
    
                    for (i = 0; i < data.filenames.length; ++i) {
                        $("#mapFilenameSelect")[0].appendChild(
                            new Option(
                                data.filenames[i].replace(/\.map$/, ''),
                                data.filenames[i]
                            )
                        );
                    }
    
                    console.log("map random: " + data.mapRandom);
                    console.log("map file: " + data.mapFilename);
    
                    if (data.mapRandom) {
                        $("#mapFilenameSelect").val('');
                    } else {
                        $("#mapFilenameSelect").val(data.mapFilename);
                    }
                });
    
                $("#mapSelectDialog").dialog({
                    autoOpen: false,
                    modal: true,
                    resizable: false,
                    width: 350,
                    buttons: {
                        Cancel: function() {
                            $(this).dialog("close");
                        },
                        Ok: function() {
                            $(this).find("form").submit();
                        }
                    }
                });
    
                $("body").keydown(function(event) {
                    if (event.keyCode == keyCodes.F2) {
                        $("#mapSelectDialog").dialog("open");                
                    }
                });

                $(window).on('beforeunload', function() {
                    if(window.saveSession) {
                        window.saveSession();
                    }

                    console.log('app closed.');
                });

                $("body").on('contextmenu', function() {
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div id="display-frame">
            <div class="uiElem" id="fpsContainer">
                <div>
                    <span id="fps">
                    </span>
                </div>
            </div>
            <canvas id="canvas"></canvas>
            <div id="mapSelectDialog" title="Select a Map">
                <form action="select_map.php" method="post">
                    <select id="mapFilenameSelect" name="mapFilename">
                        <option value="">Random Map</option>
                    </select>
                </form>
            </div>
        </div>
    </body>
</html>
